<script setup>
import { Promotion } from '@element-plus/icons-vue'
</script>

<template>
  <el-container v-if="$route.path === '/system/qa'">
    <el-main
      :style="{
        margin: '20px 50px 20px 50px',
        fontSize: '16px',
        backgroundColor: '#fff',
        boxShadow: '2px 2px 4px 2px #999'
        // maxWidth: '1510px'
        // display: flex,
        // alignItems: center
      }"
    >
      <!-- 渲染输入框内容  -->
      <div>
        <iframe
          src="https://open.bigmodel.cn/shareapp/v1/?share_code=o-HWUIc-TcK9k8zAqPTTd"
          width="100%"
          height="600px"
          frameborder="0"
        ></iframe>
      </div>
    </el-main>

    <!-- 底部输入框和按钮 -->
    <el-footer
      :style="{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '14px',
        color: '#666',
        padding: '0px 45px 0px 0px'
      }"
      ><el-input
        :style="{
          height: '50px',
          fontSize: '16px',
          margin: '15px 0px 30px 50px',
          overflowY: 'auto'
        }"
        v-model="input"
        placeholder="来说点什么吧..."
      />
      <el-button
        :style="{ margin: '15px 0px 30px 0px', width: '60px', height: '50px' }"
        @click="handleSendMessage"
        ><el-icon><Promotion /></el-icon
      ></el-button>
    </el-footer>
  </el-container>
</template>

<style>
.chat-container-me {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.chat-container-chat {
  display: flex;
  align-items: center;
}
.avatar-left {
  width: 50px;
  height: 50px;
  margin-left: 10px;
}
.avatar-right {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.chat-info-me {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-info-chat {
  display: flex;
  flex-direction: column;
}
.time {
  color: gray;
  font-size: 12px;
  margin: 10px;
  padding-top: 20px;
}
.message {
  background-color: #f0f0f0;
  margin: 0px 10px 0px 20px;
  border-radius: 5px;
}
</style>
